<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/resource">
</head>
<title>话题主页</title>
<link rel="stylesheet" th:href="@{css/topic.css}">
<body>
<div class="camera_box">
  <div class="camera jumpApp">
    <i class="camera_icon"></i>
  </div>
</div>
<div id="wrapper">
  <div class="container">
    <div class="detail_download">
      <!--话题发布者-->
    </div>
    <div class="ltx_user_info">
      <div class="personal_card">
        <!--话题信息-->
      </div>
      <!--导航-->
      <div class="ltx_navigation_box">
        <ul class="ltx_navigation">
          <li class="production active">
            <span class="headline">热门</span>
          </li>
          <li class="like">
            <span class="headline">最新</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 列表 -->
    <div class="ltx_home_list">
      <lu class="list clearfix" id="thelist">
        <!--列表信息-->
      </lu>
      <div class="pullUp">
        <span class="loading"></span>
        <span class="loading_text">加载中...</span>
      </div>
    </div>
  </div>
  <!-- 滚动到一定的位置悬浮的导航 -->
  <div class="ltx_navigation_box button_fixed">
    <ul class="ltx_navigation">
      <li class="production active"><span class="headline">热门</span>
      </li>
      <li class="like"><span class="headline">最新</span>
      </li>
    </ul>
  </div>
</div>
<div class="protective_cover"></div>
</body>
<script th:src="@{js/iscroll.js}"></script>
<!--话题发布者-->
<script type="text/html" id="download">
  <div class="personal_details">
    <img src="{{publisherPortraitUrl}}" alt="" class="head_portrait">
    <div class="personal_userinfo">
      <div class="personal_name">{{publisherNickName}}</div>
      <div class="personal_text">邀你一起来参与话题</div>
    </div>
  </div>
  <div class="download jumpApp">
    <img th:src="@{image/playLook.png}" alt="">
  </div>
</script>
<!--话题相关信息-->
<script type="text/html" id="userInfo">
  <div class="info1">
    <div class="photo">
      {{if headPortraitUrl != ""}}
      <img src="{{headPortraitUrl}}" al t="">
      {{else}}
      <div class="default_head"></div>
      {{/if}}
    </div>
    <div class="describe_box">
      <div class="describe_title"># {{name}}</div>
      <div class="play_participants">
        <div class="play_num">{{viewCount}}人播放</div>
        <div class="participants_num">{{joinCount}}人参与</div>
      </div>
    </div>
  </div>
  <div class="info2">
    <p class="info2_content">
      {{if descripti!=""}}
      {{description}}
      {{else}}
      这家伙很懒什么都没有留下
      {{/if}}
    </p>
  </div>
</script>
<!--视频列表内容-->
<script type="text/html" id="listItem">
  {{each momentList value index}}
  <li class="item" data-momentId="{{value.momentId}}">
    <div class="cover" style="background-image:url('{{value.coverUrl}}')">
      <img class="play_app fr" th:src="@{image/playApp.png}">
    </div>
  </li>
  {{/each}}
</script>
<script>
  $(function () {
    FastClick.attach(document.body);//解决300ms点击延迟的问题iphone
    var param = {
      topicId: +GetRequest().topicId,
      page: 1,
      rows: 10,
      viewType: 132
    }
    var myScroll,
      addNum;
    var flag = 2;//1代表点击热门，2代表点击最新

    load()

    // 初始化加载
    function load() {
      swipeup();
      pullOnLoad(param) //一开始加载数据；
      /**
       * 所有的点击事件
       */
      //点击最新
      $(".ltx_navigation li.like").on("click", function () {
        if (flag == 2) {
          $(".button_fixed").hide();
          $('.ltx_navigation .like').addClass("active").siblings().removeClass("active")
          $(".ltx_home_list .list").html('');
          $(".pullUp").html("<span class='loading'></span><span class='loading_text'>加载中...</span>");
          param.page = 1;
          param.viewType = 133;
          swipeup()
          pullOnLoad(param);
          flag = 1
        }
      })
      //点击热门
      $(".ltx_navigation li.production").on("click", function () {
        if (flag == 1) {
          $(".button_fixed").hide();
          $('.ltx_navigation .production').addClass("active").siblings().removeClass("active");
          $(".ltx_home_list .list").html('');
          $(".pullUp").html("<span class='loading'></span><span class='loading_text'>加载中...</span>");
          param.page = 1;
          param.viewType = 132;
          swipeup()
          pullOnLoad(param);
          flag = 2;
        }
      })
      //列表中前三个点击跳到对应的详情页中，其余跳转到app
      $(".ltx_home_list .list").on("click ", ".item:nth-child(-n+3)", function () {
        var momentId = $(this).attr("data-momentId")
        window.location.href = "videoDetail?momentId=" + momentId
      })
      // 点击跳转到app
      $(document).on("click", ".item:not(:nth-child(-n+3)),.jumpApp", function () {
        var u = navigator.userAgent;
        if (/MicroMessenger/gi.test(u) || u.match(/QQ\//i) == "QQ/") {
          if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {//ios环境)
            $(".protective_cover").css("background-image", "url([[@{image/ios.png}]])")
          }
          $(".protective_cover").show();
          return false;
        }
        jumpApp("huanai://ltx");
      })
      //  去掉引导
      $(".protective_cover").on("click", function () {
        $(this).hide();
      })
    }

    //滚动加载
    function swipeup() {
      if (myScroll) {
        myScroll.destroy();
        myScroll = null;
      }
      myScroll = new iScroll("wrapper", {
        onScrollMove: function () { //拉动时
          //上拉加载
          if (this.y < this.maxScrollY) {
            $(".pullUp").html("释放加载");
            $(".pullUp").addClass("loading");
          } else {
            if (addNum >= 10) {
              $(".pullUp").html("上拉加载");
              $(".pullUp").removeClass("loading");
            }

          }
        },
        onScrollEnd: function () { //拉动结束时
          // 滚动到一定的位置时出现滚动条
          var topDistance = -($(".detail_download").height() + $(".personal_card").height());

          if (this.y <= topDistance) {
            $(".button_fixed").show();
          } else {
            $(".button_fixed").hide()
          }
          //上拉加载
          if ($(".pullUp").hasClass('loading')) {
            if (addNum >= 10) {
              $(".pullUp").html("<span class='loading'></span><span class='loading_text'>加载中...</span>");
              param.page += 1;
              pullOnLoad(param);
            } else {
              $(".pullUp").html("已经没有了")
            }

          }
        }
      });
    }

    //上拉加载函数,ajax
    function pullOnLoad(param) {
      setTimeout(function () {
        $.post('[[@{/apiTopic/topicIndex}]]', {
          topicId: param.topicId,
          page: param.page,
          rows: param.rows,
          viewType: param.viewType
        }, function (data) {
          var data = JSON.parse(data);    // 返回数据
          if (data.ret == "0") {
            //渲染头部
            if (param.page == 1) {
              if ($(".detail_download").children().length == 0) {
                var download = template("download", data);
                var userInfo = template("userInfo", data);
                $(".detail_download").html(download);
                $(".personal_card").html(userInfo);
              }
            }
            var data_length = data.momentList.length;//数据的总长度
            addNum = data_length;
            if (data_length <= 0) {
              $(".pullUp").html("已经没有了");
            } else {
              //渲染列表模板
              var listItem = template("listItem", data);
              $(".ltx_home_list .list").append(listItem);
              //只要不是列表的前三个都要显示按钮打开app
              $(".ltx_home_list .list .item:nth-child(-n+3) .cover").find("img").remove();
              if (data_length < 10) {
                $(".pullUp").html("已经没有了")
              } else {
                $(".pullUp").html("上拉加载")
              }
            }
            // 重置 item 高度
            picListHeight();
            myScroll.refresh();
          } else {
            //提示
            layer.open({
              content: data.msg
              , skin: 'msg'
              , time: 2 //2秒后自动关闭
            });
          }
        })
      }, 1000)
    }
  })

  // 图片列表的高度
  function picListHeight() {
    // 列表的高度，宽高1比1.3
    var height = 1.3 * ($(".ltx_home_list .list .item").width());
    var marginBottom = $(".ltx_home_list .list .item").css("margin-right");
    $(".ltx_home_list .list .item").css("height", height);
    $(".ltx_home_list .list .item").css("margin-bottom", marginBottom);
  }

</script>

</html>